import arrow from '@/assets/c_arrow.png';
import woman from '@/assets/e_woman.png';
import img from '@/assets/home_swiper_bg2.png';
import { getNewUrl, productList } from '@/utils';
import { Collapse, Flex } from 'antd';
import { useState } from 'react';
import { Helmet, Link, useIntl } from 'umi';
import CommonItem from './CommonItem';
import './index.less';
const ActivityOne: React.FC = () => {
  const panelStyle: React.CSSProperties = {
    marginBottom: 20,
    borderRadius: 12,
    border: 'none',
    background: '#C3DDFF',
  };
  const intl = useIntl();
  const getItems: any = (panelStyle: any) => {
    const list = [1, 2, 3];
    return list.map((item) => {
      return {
        key: item,
        label: (
          <div style={{ fontSize: 24, fontWeight: 600 }}>
            {intl.formatMessage({ id: `home.match_m${item}` })}
          </div>
        ),
        children: (
          <div
            style={{
              borderBottomLeftRadius: 12,
              borderBottomRightRadius: 12,
              padding: '7px  82px 0 12px',
              fontSize: 20,
            }}
          >
            <div>{intl.formatMessage({ id: `home.match_m${item}_word` })}</div>
          </div>
        ),
        style: panelStyle,
      };
    });
  };
  const stepList = ['1', '2', '3'];

  const bottomList = ['1', '2', '3', '4'];
  const [index, setIndex] = useState('1');
  const isEn = intl.locale == 'en-US';

  return (
    <>
      <Helmet>
        <title>{intl.formatMessage({ id: 'home.banner_meta_title' })}</title>
      </Helmet>
      <div className="exclusive">
        <div className="exclusive_content">
          <div className="exclusive_top">
            <div
              className="common"
              style={{
                display: 'flex',
                position: 'relative',
                padding: '0 20px',
                justifyContent: 'space-between',
                minHeight: 350,
                alignItems: 'center',
              }}
            >
              <div>
                <div
                  style={{
                    padding: '0 0 22px',
                    fontSize: 40,
                    color: '#fff',
                    fontWeight: 600,
                    width: 700,
                  }}
                >
                  {intl.formatMessage({ id: 'home.match_title' })}
                </div>
                <div style={{ fontSize: 30, color: '#fff' }} className="exclusive_word">
                  {intl.formatMessage({ id: 'home.match_word' })}
                </div>
              </div>
              <img
                style={{ position: 'absolute', bottom: 0, right: 110, zIndex: 2 }}
                height={321}
                width={300}
                src={woman}
              />
              <div
                style={{
                  width: 120,
                  height: 120,
                  transform: 'rotate(45deg)',
                  opacity: 0.2,
                  position: 'absolute',
                  background: '#C3DDFF',
                  top: 105,
                  right: 310,
                  borderRadius: 8,
                }}
              />
              <div
                style={{
                  width: 120,
                  height: 120,
                  transform: 'rotate(45deg)',

                  position: 'absolute',
                  background: '#C3DDFF',
                  bottom: -60,
                  right: 350,
                  borderRadius: 8,
                }}
              />
              <div
                style={{
                  width: 300,
                  height: 300,
                  transform: 'rotate(45deg)',
                  opacity: 0.5,
                  position: 'absolute',
                  background: '#C3DDFF',
                  top: 80,
                  right: -40,
                  borderRadius: 16,
                }}
              />
              <div
                style={{
                  width: 300,
                  height: 300,
                  transform: 'rotate(45deg)',
                  opacity: 0.8,
                  position: 'absolute',
                  background: '#C3DDFF',
                  top: 140,
                  right: -40,
                  borderRadius: 16,
                  zIndex: 1,
                }}
              />
            </div>
          </div>
          <div className="common">
            <div
              style={{
                fontSize: 32,
                fontWeight: 'bold',
                textAlign: 'center',
                margin: '80px 0 56px ',
              }}
            >
              {intl.formatMessage({ id: 'home.match_m' })}
              {isEn ? <div>{intl.formatMessage({ id: 'home.match_x' })}</div> : null}
            </div>
            <Flex justify="space-between">
              <div style={{ width: 600 }}>
                <Collapse
                  defaultActiveKey={['1']}
                  className="exclusive_collapse"
                  bordered={false}
                  expandIconPosition="right"
                  expandIcon={({ isActive }) => (
                    <img
                      width={23}
                      height={11}
                      src={arrow}
                      style={{ transform: `rotate(${!isActive ? 180 : 0}deg)` }}
                    />
                  )}
                  items={getItems(panelStyle)}
                />
              </div>
              <div
                style={{ position: 'relative', height: 350, marginTop: -10, overflow: 'hidden' }}
              >
                <img height={360} style={{ position: 'relative', zIndex: 1 }} src={img} />
                <div
                  style={{
                    position: 'absolute',
                    background: '#C3DDFF',
                    bottom: -90,
                    right: 0,
                    width: 335,
                    height: 350,
                    borderRadius: 24,
                    transform: 'rotate(-18deg)',
                  }}
                />
              </div>
            </Flex>
            <div>
              <div
                style={{
                  fontSize: 32,
                  fontWeight: 'bold',
                  textAlign: 'center',
                  margin: '36px 0 30px ',
                }}
              >
                {intl.formatMessage({ id: 'home.match.choose_title' })}
              </div>
              <Flex gap={32} justify="space-between">
                {productList.map((item) => {
                  const { key, word } = item;
                  return (
                    <Flex
                      key={key}
                      style={{
                        boxShadow: '1px 0px 4px 2px #E3E3E3',
                        flex: 1,
                        flexDirection: 'column',
                        textAlign: 'center',
                        borderRadius: 2,
                      }}
                    >
                      <div style={{ borderBottom: '1px solid #eee' }}>
                        <img
                          style={{ margin: '23px 0 21px' }}
                          height={40}
                          src={require(`@/assets/e_icon${key}.png`)}
                        />
                        <div style={{ fontSize: isEn ? 16 : 20, fontWeight: 'bold' }}>
                          {intl.formatMessage({ id: word })}
                        </div>
                        <div
                          style={{ color: '#666', margin: '4px 0 13px', fontSize: isEn ? 12 : 14 }}
                        >
                          {intl.formatMessage({ id: `home.match.choose_word${key}` })}
                        </div>
                      </div>
                      <div
                        style={{
                          display: 'flex',
                          flex: 1,
                          flexDirection: 'column',
                          padding: '12px 30px',
                        }}
                      >
                        <div
                          style={{
                            fontSize: 12,

                            color: '#999',
                            lineHeight: '14px',
                            marginBottom: isEn ? 0 : 12,
                          }}
                        >
                          <div>{intl.formatMessage({ id: `home.match.choose_f_word${key}` })}</div>
                          <div>{intl.formatMessage({ id: `home.match.choose_s_word${key}` })}</div>
                        </div>
                        <div style={{ marginTop: 'auto', lineHeight: '24px' }}>
                          <Link to={getNewUrl(`/more?productType=${key}`)}>
                            {intl.formatMessage({ id: 'home.match.choose_all' })}
                          </Link>
                        </div>
                      </div>
                    </Flex>
                  );
                })}
              </Flex>

              <div style={{ textAlign: 'center', paddingBottom: 80 }}>
                <div style={{ padding: '80px 0 45px', fontSize: 32, fontWeight: 'bold' }}>
                  {intl.formatMessage({ id: 'home.match.get' })}
                </div>
                <Flex gap={150} justify="space-between">
                  {stepList.map((item, index) => {
                    return (
                      <div key={item} style={{ flex: 1, position: 'relative' }}>
                        <img width={'100%'} src={require(`@/assets/a_step${item}.png`)} />

                        <div
                          style={{
                            margin: '20px 0',
                            lineHeight: '27px',
                            fontSize: 24,
                            color: '#123BA4',
                          }}
                        >
                          {intl.formatMessage({ id: `home.match.get_title${item}` })}
                        </div>
                        <div style={{ fontSize: 20, color: '#646464' }}>
                          {intl.formatMessage({ id: `home.match.get_word${item}` })}
                        </div>
                        {index != stepList.length - 1 ? (
                          <img
                            style={{
                              position: 'absolute',
                              top: '110px',
                              right: '-120px',
                            }}
                            height={50}
                            src={require(`@/assets/a_line${item}.png`)}
                          />
                        ) : null}
                      </div>
                    );
                  })}
                </Flex>
              </div>
            </div>
          </div>
          <CommonItem />
          <div className="common" style={{ padding: '80px 0 150px', textAlign: 'center' }}>
            <div style={{ fontSize: 34, fontWeight: 600 }}>
              {intl.formatMessage({ id: 'home.match.free_title' })}
            </div>
            <div
              style={{
                margin: '16px 0 30px ',
                lineHeight: '28px',
                fontSize: 18,
                color: '#4b4b4b',
                opacity: 0.7,
              }}
            >
              <div>{intl.formatMessage({ id: 'home.match.free_word' })}</div>
              <div>{intl.formatMessage({ id: 'home.match.free_word1' })}</div>
            </div>
            <Flex gap={22} justify="space-between">
              {bottomList.map((item) => {
                const active = item == index;
                return (
                  <div
                    onClick={() => {
                      setIndex(item);
                    }}
                    style={{
                      padding: '24px 18px',
                      flex: 1,
                      textAlign: 'left',
                      cursor: 'pointer',
                      borderRadius: 6,
                      border: `1px solid ${active ? '#e3e3e3' : 'none'}`,
                      background: active ? '#2b58ff' : '#fafafa',
                    }}
                    key={item}
                  >
                    <Flex gap={16} align="center">
                      <Flex
                        align="center"
                        justify="center"
                        style={{
                          width: 56,
                          height: 56,
                          borderRadius: '50%',
                          background: active ? '#fff' : 'none',
                          border: `1px solid ${active ? 'transpant' : '#e3e3e3'}`,
                        }}
                      >
                        <img
                          width={28}
                          height={28}
                          src={require(`@/assets/${
                            active ? 'active' : 'a'
                          }_bottom_icon${item}.svg`)}
                        />
                      </Flex>
                      <div
                        style={{
                          fontWeight: 600,
                          fontSize: isEn ? 13 : 24,
                          color: active ? '#fff' : '#12141d',
                        }}
                      >
                        {intl.formatMessage({ id: `home.match.free_item_title${item}` })}
                      </div>
                    </Flex>

                    <div
                      style={{
                        fontSize: 16,
                        color: active ? '#ddd' : '#8a8a8a',
                        marginTop: 12,
                      }}
                    >
                      {intl.formatMessage({ id: `home.match.free_item_word${item}` })}
                    </div>
                  </div>
                );
              })}
            </Flex>
          </div>
        </div>
      </div>
    </>
  );
};

export default ActivityOne;
